<template>
  <div class="bg-g">
    <div class="middle flx-row-bw-c user-nav-main">
      <div class="left">
        <span class="c-fg" style="margin-right: 42px"
          >您好，欢迎来到190vip</span
        >
        <span class="c-fg"
          >客户热线 {{ $store.state.app.customerServiceTelephone }}</span
        >
      </div>
      <div class="right flx-row-s-c">
        <!-- <input
        v-model.trim="search"
        type="text"
        class="search"
        placeholder="请输入关键词试试"
        maxlength="50"
        @keyup.enter="submit"
      /> -->
        <!-- <a class="link p-r-item" href="https://www.xiniu.com/" target="_blank">犀牛云</a> -->
        <span
          style="color: #666; padding-right: 15px; cursor: pointer"
          @click="toWhis"
          >Whois查询</span
        >
        <!-- <a class="link p-r-item" href="/apply">申请代理</a> -->
        <!-- <a class="link p-r-item" href="/pointsMall">积分商城</a> -->
        <a class="link p-r-item" href="/applyAgent">申请代理</a>
        <div class="link padding-item border-item" @click="toCart">购物车</div>
        <template v-if="!$store.state.user.token">
          <a class="link padding-item" href="/login" @click="toLogin">登录</a>
          <a class="brock-link" href="/login/re">免费注册</a>
        </template>
        <div v-else class="avatar-area flx-row-s-c">
          <span class="f-14 c-o" style="margin-right: 10px">{{
            $store.state.user.nickname
              ? $store.state.user.nickname
              : $store.state.user.account
          }}</span>
          <a class="avatar-default" href="/user"></a>
          <div class="user-box-area">
            <user-box :other="true"></user-box>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "VipUsernav",
  components: {
    userBox: () => import("_c/navBox/useBox.vue"),
  },
  data() {
    return {
      search: "",
    };
  },
  methods: {
    toWhis() {
      if (this.$route.name === "whoisSearch") {
        return false;
      }
      this.$router.replace({ path: "/whoisSearch" });
    },
    toLogin() {
      if (this.$route.name != "login" && this.$route.name != "register") {
        this.$storage.setToLoginRoute(this.$route.fullPath);
      }
    },
    toCart() {
      if (
        this.$route.name != "login" &&
        this.$route.name != "register" &&
        this.$route.name != "forget" &&
        this.$route.name != "emailc"
      ) {
        if (this.$route.path == "/po") {
          this.$router.go(0);
        } else {
          this.$router.push("/po");
        }
      } else {
        window.location.href = "/po";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.bg-g {
  background-color: #f3f3f3;
}
.user-nav-main {
  color: $fgw;
  .c-fg {
    color: $fg;
  }
  // .search {
  //   @include size(222px, 40px);
  //   background-color: #F5F5F5;
  //   padding-left: 12px;
  //   padding-right: 43px;
  //   @include bg-setting('search', 21px 21px, 190px 8px);
  // }
  .link {
    // line-height: 35px;
    line-height: 15px;
    @include h-c(null, null, rgba(#353535, 0.8), #f9521f);
    cursor: pointer;
  }
  .padding-item {
    padding: 0 15px;
  }
  .p-r-item {
    padding-right: 15px;
  }
  .border-item {
    border-right: #cfcfcf 1px solid;
    border-left: #cfcfcf 1px solid;
  }
  .brock-link {
    display: block;
    @include size(80px, 38px);
    @include h-c(#f9521f, #fa7851, #ffffff);
    line-height: 38px;
    text-align: center;
  }
  .avatar-area {
    position: relative;
    margin-left: 30px;
    height: 38px;

    .avatar-default {
      display: block;
      @include size(30px);
      @include bg-setting("user", 16px 17px, center);
      background-color: #f9521f;
      border-radius: 50%;
      cursor: pointer;
      // margin-top: 4px;
    }
    .user-box-area {
      position: absolute;
      right: 0;
      top: 38px;
      transform: translateY(10px);
      box-shadow: 0 2px 12px 0 rgba(#000, 0.1);
      z-index: -1;
      opacity: 0;
      transition: all 0.5s;
    }

    &:hover .user-box-area {
      transform: translateY(0);
      z-index: 5;
      opacity: 1;
    }
  }
}
</style>